{% include 'admin/header.html' %}
<script>
    changeTab('位置管理');

    var flag = false;

    function mark() {
        if (flag) {
            $('.do_mark').removeClass('hidden');
        }
    }

    function close_() {
        $('.do_mark').addClass('hidden');
    }
    
    function delete_(id) {
        $.post('/location/delete/' + id, function (data) {
            if (data.status) {
                alert('删除成功！');
                location.reload();
            } else {
                alert('删除失败！ ' + data.msg);
            }
        });
    }
</script>
<div class="input-xcontent">
    <div class="do_mark hidden" style="position: absolute; width: 100vw; height: 100vh; top: 0; left:0; z-index: 1000; opacity: 1;">
        <div style="position: absolute; top: 28vh; left: 48vw;">
            <div style="width: 240px;" class="thumbnail">
                <a href="javascript:" onclick="close_();" class="pull-right">&times;</a>
                <div style="margin: 5px 5px -5px;">
                    <p>经度：<span id="lng"></span></p>
                    <p>纬度：<span id="lat"></span></p>
                </div>
                <form id="local_form">
                    <div style="margin: 0 8px;">
                        <input id="location_name" class="form-control" placeholder="位置名称">
                    </div>
                    <div class="caption text-center">
                        <button type="button" onclick="close_();"
                                class="btn btn-danger btn-sm">取消</button>
                        <button type="submit" class="btn btn-info btn-sm">录入</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div>
        <div class="col-lg-12 col-xs-12">
            <h4><span class="fa fa-hand-o-right"></span> 位置管理</h4>
            <div style="padding: 13px 5px 0; position: relative;" class="pull-right">
                <label style="position: absolute;top: 20px; left: -56px;">定位检测 </label>
                <span id="local_kg" class="switch-{% if local %}on{% else %}off{% endif %}"></span>
            </div>
        </div>
        <div>
            <div class="col-lg-12 col-xs-12 show_local">

            </div>
            <div class="text-center">
                <button onclick="restartGet();" class="btn btn-warning">重新获取</button>
                <button onclick="mark();" class="btn btn-info">录入位置</button>
            </div>
        </div>
        <hr>
        <div class="col-lg-12 col-xs-12">
            <table class="table table-striped">
                <thead class="bg-color-x">
                <tr>
                    <td>序号</td>
                    <td>位置名称</td>
                    <td>经度</td>
                    <td>纬度</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody>
                    {% if not locals %}
                        <td colspan="5" align="center">暂无位置信息</td>
                    {% else %}
                        {% for local in locals %}
                            <tr>
                                <td><b class="fa fa-map-marker">&nbsp;&nbsp;</b>{{ loop.index }}</td>
                                <td>{{ local.location_name }}</td>
                                <td>{{ local.lng }}</td>
                                <td>{{ local.lat }}</td>
                                <td>
                                    <button onclick="delete_({{ local.id }});" class="btn btn-xs btn-danger">删除</button>
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    $(function () {
        switchEvent("#local_kg", function() {
            $.post("/location/switch/1", function (data) {
                console.log(data);
            });
        }, function() {
            $.post("/location/switch/0", function (data) {
                console.log(data);
            });
        });
    });

    var show = $('.show_local');
    var lc = new Local();

    function getLocation() {
        lc.getPosition(function (position) {
            console.log(JSON.stringify(position, null, 4));
            var lng = position.lng;
            var lat = position.lat;
            var accuracy = position.accuracy;
            var htm = '<label class="text-left">\n' +
                '                    <p>经度：<span>' + lng + '</span></p>\n' +
                '                    <p>纬度：<span>' + lat + '</span></p>\n' +
                '                    <p>精度：<time>' + accuracy + '</time></p>\n' +
                '                </label>';

            show.html(htm);
            $('#lng').html(lng);
            $('#lat').html(lat);
            flag = true;
        });
    }

    function restartGet() {
        show.html('<img src="/static/images/loading.jpg">\n' +
                '<div>正在获取位置信息请稍等...</div>');
        flag = false;
        getLocation();
    }
    restartGet();

    $('#local_form').submit(function (e) {
        e.preventDefault();
        var name = $('#location_name').val();
        var lng = $('#lng').text();
        var lat = $('#lat').text();
        console.log(name, lng, lat);
        if (name === undefined || name === '') {
            alert('位置名称不能为空！');
        } else {
            $.post('/location/add', {
                name: name,
                lng: lng,
                lat: lat
            }, function (data) {
                if (data.status) {
                    alert('添加成功！');
                } else {
                    alert('添加失败！ ' + data.msg);
                }
                location.reload();
            });
        }
    });
</script>
{% include 'admin/footer.html' %}
